import React, { Component } from 'react'
import { Icon } from 'react-vant';
import { Swipe } from 'react-vant';
import gouyao from '../img/IMG_0046_03.png'
import anquan from '../img/IMG_0046_04.png'
import pifu from '../img/IMG_6188(20211015-221716).PNG'
import fuke from '../img/IMG_6189(20211015-221727).PNG'
import xuaihua from '../img/IMG_6215(20211015-221729).PNG'
import huxi from '../img/IMG_6191(20211015-221735).PNG'
import yingyang from '../img/IMG_6192(20211015-221737).PNG'
import jiating from '../img/IMG_6193(20211015-221739).PNG'
import erbi from '../img/IMG_6219(20211015-221742).PNG'
import nanke from '../img/IMG_6220(20211015-221744).PNG'
import guke from '../img/IMG_6196(20211015-221746).PNG'
import xinnao from '../img/IMG_6197(20211015-221747).PNG'
import lb1 from '../img/IMG_6240(20211016-095627).PNG'
import lb2 from '../img/IMG_6198.PNG'
import lb3 from '../img/IMG_6199(20211015-221804).PNG'
import lb4 from '../img/IMG_6211.png'
import tuijian from '../img/IMG_6236(20211015-222620).JPG'
import yi from '../img/IMG_0046_36.png'
import tui from '../img/IMG_0046_37.png'
import axios from '../utils/request'
import bedonce from '../utils/bedonce'


export default class Shop extends Component {

    state = {
        list: []
    }

    componentDidMount() {
        axios({
            url: '/api/xinxuan',
            method: 'post',
        }).then(res => {
            // console.log(res);
            this.setState({
                list: res.data.data
            })
        })
    }
    //商城详情
    toshopdetail(item) {
        this.props.history.push({ pathname: "/shopdetail", state: item })
    }
    //商城搜索
    search(e) {
        bedonce(() => {
            axios.post('/api/shopSearch', { value: e }).then(res => {
                console.log(res);
                this.setState({
                    list: res.data.data
                })
            })
        }, 1000)
    }

    render() {
        const { list } = this.state
        // console.log(list);

        return (
            <div className='wrap'>
                <header>
                    <div className="head">
                        <Icon name="search" />
                        <input type="text" placeholder="丁酸氢化可的松乳膏" onChange={(e) => { this.search(e.target.value) }} />
                    </div>

                </header>
                <main>
                    <div className="sone">
                        <div className="s1">
                            <img src={gouyao} alt="" />
                            <img src={anquan} alt="" />
                        </div>
                        <div className="imgs">
                            <a href="/giftlist">
                                <dl>
                                    <dt><img src={pifu} alt="" /></dt>
                                    <dd>皮肤用药</dd>
                                </dl>
                            </a>
                            <a href="/giftlist">
                                <dl>
                                    <dt><img src={fuke} alt="" /></dt>
                                    <dd>妇科用药</dd>
                                </dl>
                            </a>
                            <a href="/giftlist">
                                <dl>
                                    <dt><img src={xuaihua} alt="" /></dt>
                                    <dd>肠胃消化</dd>
                                </dl>
                            </a>
                            <a href="/giftlist">
                                <dl>
                                    <dt><img src={huxi} alt="" /></dt>
                                    <dd>呼吸用药</dd>
                                </dl>
                            </a>
                            <a href="/giftlist">
                                <dl>
                                    <dt><img src={yingyang} alt="" /></dt>
                                    <dd>营养补充</dd>
                                </dl>
                            </a>
                            <a href="/giftlist">
                                <dl>
                                    <dt><img src={jiating} alt="" /></dt>
                                    <dd>家庭常备</dd>
                                </dl>
                            </a>
                            <a href="/giftlist">
                                <dl>
                                    <dt><img src={erbi} alt="" /></dt>
                                    <dd>耳鼻咽喉</dd>
                                </dl>
                            </a>
                            <a href="/giftlist">
                                <dl>
                                    <dt><img src={nanke} alt="" /></dt>
                                    <dd>男科用药</dd>
                                </dl>
                            </a>
                            <a href="/giftlist">
                                <dl>
                                    <dt><img src={guke} alt="" /></dt>
                                    <dd>骨科疼痛</dd>
                                </dl>
                            </a>
                            <a href="/giftlist">
                                <dl>
                                    <dt><img src={xinnao} alt="" /></dt>
                                    <dd>心脑血管</dd>
                                </dl>
                            </a>
                        </div>
                    </div>
                    <div className="lunbo">
                        <Swipe className="my-swipe" autoplay={3000}>
                            <Swipe.Item><img src={lb1} alt="" /></Swipe.Item>
                            <Swipe.Item><img src={lb2} alt="" /></Swipe.Item>
                            <Swipe.Item><img src={lb3} alt="" /></Swipe.Item>
                            <Swipe.Item><img src={lb4} alt="" /></Swipe.Item>
                        </Swipe>
                    </div>
                    <div className="look">
                        <div className="s1">
                            <img src={yi} alt="" />
                            <img src={tui} alt="" />
                        </div>
                        <div className="tp">
                            <img src={tuijian} alt="" />
                        </div>
                    </div>
                    <div className="chose">
                        <h4>美洽心选</h4>
                        <div className="tw">
                            {
                                list.map((item, index) => {
                                    return (
                                        <div className="tw1" key={index} onClick={() => { this.toshopdetail(item) }}>
                                            <a href="">
                                                <img src={item.img2} alt="" />
                                                <div className="intro">
                                                    <p>{item.name}</p>
                                                    <p>￥{item.price}</p>
                                                </div>
                                            </a>
                                        </div>
                                    )
                                })
                            }
                        </div>
                    </div>
                </main>
            </div>
        )
    }
}
